<template>
	<view class="content" :style="{background: member=='cyz' ? 'url(https://dm.static.elab-plus.com/csc20201001/cyz-contact-content-bg.png)':'url(https://dm.static.elab-plus.com/csc20201001/lk-contact-content-bg.png)'}">
		<u-navbar :is-back="false" :is-fixed="true" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<image class="backImg" src="../../static/back_icon.png" mode="" @click="back"></image>
			</view>
		</u-navbar>
		<view v-if="member=='cyz'" class="cyzBg"></view>
		<view v-else class="lkBg"></view>
		<!--  #ifdef  MP-WEIXIN -->
		<view class="qrcode" v-if="member">
			<image class="memberTitle" :src="member=='cyz'?memberInfo[0].title:memberInfo[1].title" mode="widthFix"></image>
			<image :show-menu-by-longpress="true" class="qrcodeImg" :src="member=='cyz'?memberInfo[0].qrcode:memberInfo[1].qrcode" mode="widthFix" @click="longAction" ></image>
			<image class="callImg" src="https://dm.static.elab-plus.com/csc20201001/%E6%8B%A8%E6%89%93%E7%94%B5%E8%AF%9D%402x.png" @click="callPhone" mode="widthFix"></image>
		</view>
		<!--  #endif -->
		<!--  #ifndef  MP-WEIXIN -->
		<view class="qrcode" v-if="member" style="min-height: 460rpx;">
			<image class="memberTitle" :src="member=='cyz'?memberInfo[0].title:memberInfo[0].title" mode="widthFix"></image>
			<image class="qrcodeImg" style="height: 396rpx;" src="https://dm.static.elab-plus.com/csc20201001/other-mini-contact.png" mode="widthFix" ></image>
			<image class="callImg" src="https://dm.static.elab-plus.com/csc20201001/%E6%8B%A8%E6%89%93%E7%94%B5%E8%AF%9D%402x.png" @click="callPhone" mode="widthFix"></image>
		</view>
		<!--  #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',			
				background: {
					backgroundColor: 'clear',
				},
				member:'',
				memberInfo:[
					{
						title:'https://dm.static.elab-plus.com/csc20201001/%E7%BB%84%207114%402x.png',
						qrcode:'https://dm.static.elab-plus.com/csc20201001/%E7%BB%84%207116%402x.png',
						mobile:'+86-18616819079', // 
						shareQrcode:"https://dm.static.elab-plus.com/csc20201001/cyz_qrcode_icon.png",
					},
					{
						title:'https://dm.static.elab-plus.com/csc20201001/lk_title_icon.png',
						qrcode:'https://dm.static.elab-plus.com/csc20201001/lk_qrcode.png',
						mobile:'+86-15221076782',
						shareQrcode:"https://dm.static.elab-plus.com/csc20201001/lk_qrcode_icon.png",
					}
				]
			}
		},
		onLoad(options) {
			this.member = options.member;
		},
		methods: {
			back(){
				this.customNavBack();
			},
			longAction(){
				var shareQrcode = this.member=='cyz'? this.memberInfo[0].shareQrcode : this.memberInfo[0].shareQrcode;
				uni.previewImage({
					urls: shareQrcode,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			callPhone(){
				var phoneNumber = this.member=='cyz'? this.memberInfo[0].mobile : this.memberInfo[1].mobile;
				uni.makePhoneCall({
				    phoneNumber: phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 750rpx;
		min-height: 100%;
		padding-bottom: 56rpx;
		background: #000000;
		background:url(https://dm.static.elab-plus.com/csc20201001/lk-contact-content-bg.png);  
		filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
		-moz-background-size:100% 100%;  
		background-size:100% 100%;  
		.lkBg {
			margin-top: -180rpx;
			width: 750rpx;
			height: 1056rpx;
			background:url(https://dm.static.elab-plus.com/csc20201001/lk-contact-content.png);
			filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
			-moz-background-size:100% 100%;  
			background-size:100% 100%;  
		}
		.cyzBg {
			width: 750rpx;
			height: 1056rpx;
			margin-top: -180rpx;
			background:url(https://dm.static.elab-plus.com/csc20201001/cyz-contact-content.png);
			filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
			-moz-background-size:100% 100%;  
			background-size:100% 100%;  
		}
		.qrcode {
			width: 690rpx;
			min-height: 840rpx;
			margin-left: 30rpx;
			margin-top: -340rpx;
			z-index: 999;
			position: relative;
			.memberTitle {
				width: 322rpx;
				height: 92rpx;
				margin-left: calc(50% - 161rpx);
				margin-bottom: 30rpx;
			}
			.qrcodeImg {
				width: 100%;
				height: 712rpx;
				position: absolute;
				top: 130rpx;
				left: 0;
			}
			.callImg {
				position: absolute;
				left: calc(50% - 185rpx);
				bottom: 46rpx;
				width: 370rpx;
			}
		}
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		.backImg {
			width: 56rpx;
			height: 56rpx;
		}
	}
</style>
